<template>
  <view class="page" :style="{ paddingBottom: inputHeight + 'px' }">
    <view class="specialist-info">
      <image
        class="specialist-info-pic"
        src="https://img0.baidu.com/it/u=72257670,924133116&fm=253&fmt=auto&app=138&f=JPG?w=499&h=375"
        mode="aspectFill"
      />
      <view class="info">
        <view class="info-title"
          ><text class="name">李教授</text>知名农业专家</view
        >
        <view class="tags">
          <view class="tag">从业20年</view>
          <view class="tag">农技专家</view>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="left-info">
        <image
          class="pic"
          src="https://img0.baidu.com/it/u=72257670,924133116&fm=253&fmt=auto&app=138&f=JPG?w=499&h=375"
          mode="aspectFill"
        ></image>
        <view class="message-box">
          <view class="message">你好，有什么要咨询？ </view>
        </view>
      </view>
      <view
        class="right-info"
        :class="[`right-info-${index + 1}`]"
        v-for="(item, index) in myInfo"
        :key="index"
      >
        <view class="message-box">
          <view class="message">可能暂时没有，谢谢！</view>
        </view>
        <image
          class="pic"
          src="https://img0.baidu.com/it/u=72257670,924133116&fm=253&fmt=auto&app=138&f=JPG?w=499&h=375"
          mode="aspectFill"
        ></image>
      </view>
    </view>

    <view class="bot-input">
      <textarea auto-height class="input" v-model="content"></textarea>
      <button class="send-btn" @click="onSend">发送</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: "",
      inputHeight: 0,
      myInfo: [
        {
          content: "可能暂时没有，谢谢！",
        },
        {
          content: "你好！",
        },
      ],
    };
  },
  onLoad() {},
  computed: {},
  mounted() {
    this.getInputHeight();
    this.toPageBottom();
  },
  methods: {
    getInputHeight() {
      this.$nextTick(async () => {
        const res = await this.queryRect(`bot-input`);
        this.inputHeight = res.height;
      });
    },
    gotoPage(path) {
      uni.navigateTo({
        url: path,
      });
    },
    onSend() {
      this.myInfo.push({
        content: this.content,
      });
      this.toPageBottom();
    },
    toPageBottom() {
      this.$nextTick(async () => {
        const current = await this.queryRect(
          `right-info-${this.myInfo.length}`
        );
        uni.pageScrollTo({
          scrollTop:
            uni.getSystemInfoSync().windowHeight + Math.abs(current.top),
          duration: 300,
        });
        console.log(
          uni.getSystemInfoSync().windowHeight,
          Math.abs(current.top)
        );
      });
    },
    // 获取各个标签的尺寸
    queryRect(el, item) {
      // #ifndef APP-NVUE
      // $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html
      // 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同
      return new Promise((resolve) => {
        this.$uGetRect(`.${el}`)
          .then((size) => {
            resolve(size);
          })
          .catch((err) => {
            console.log(err);
          });
      });
      // #endif

      // #ifdef APP-NVUE
      // nvue下，使用dom模块查询元素高度
      // 返回一个promise，让调用此方法的主体能使用then回调
      return new Promise((resolve) => {
        dom.getComponentRect(
          item ? this.$refs[el][0] : this.$refs[el],
          (res) => {
            resolve(res.size);
          }
        );
      });
      // #endif
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100%;
  background: #f6f6f6;
  padding: 0 30rpx;
}
.scroll-view {
  width: 100%;
  height: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
}
.specialist-info {
  width: 100%;
  height: 224rpx;
  padding: 42rpx;
  display: flex;
  align-items: center;
  background: #fff;
  margin-bottom: 32rpx;
  border-radius: 18rpx;
  &-pic {
    width: 140rpx;
    height: 140rpx;
    background: #ffffff;
    border-radius: 50%;
    margin-right: 40rpx;
  }
  .info {
    flex: 1;

    &-title {
      font-size: 21rpx;
      color: #707070;
      margin-bottom: 26rpx;
    }
    .name {
      font-size: 32rpx;
      font-weight: bold;
      color: #202020;
      margin-right: 28rpx;
    }
  }
  .tags {
    display: flex;
    flex-wrap: wrap;
    .tag {
      padding: 0 18rpx;
      border-radius: 18rpx;
      font-size: 21rpx;
      color: #fff;
      margin-right: 18rpx;
      background: #1ac678;
    }
  }
}
.left-info,
.right-info {
  display: flex;
  margin-bottom: 40rpx;
  //   align-items: center;
  .pic {
    width: 79rpx;
    height: 79rpx;
    border-radius: 50%;
    opacity: 1;
  }
  .message-box {
    flex: 1;
  }
  .message {
    display: inline-block;
    margin-left: 14rpx;
    padding: 21rpx 26rpx;
    font-size: 26rpx;
    color: #2f2f2f;
    background: #fff;
    border-radius: 0 18rpx 18rpx 18rpx;
  }
}
.left-info {
  .message {
    box-shadow: 0px 4px 7px 2px rgba(0, 0, 0, 0.16);
  }
}
.right-info {
  .message-box {
    flex: 1;
    text-align: right;
  }
  .message {
    background: #1ac678;
    color: #fff;
    margin-right: 14rpx;
    border-radius: 18rpx 0 18rpx 18rpx;
  }
}
.bot-input {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 105rpx;
  background: #ffffff;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 11rpx 25rpx;
  .input {
    width: 500rpx;
    min-height: 40rpx;
    border-radius: 40rpx;
    background: #f6f6f6;
    padding: 20rpx 35rpx;
  }
  .send-btn {
    width: 137rpx;
    height: 81rpx;
    background: #1ac678;
    border-radius: 53rpx;
    color: #fff;
    margin-left: 25rpx;
  }
}
</style>
